<template>
  <div class="app-container">
    <div class="filter-container tw-filter">
      <el-form ref="dataForm" :model="form" label-position="right" label-width="180px" style="width: 800px; margin:0 auto;">
        <el-form-item label="支付授权目录" prop="wechat_pay_url">
          <el-input  v-model="form.wechat_pay_url"  class="filter-item tw-filter-input" style="width:500px"/>
          <p style="color:#888;margin:0">请复制此URL目录地址填写在微信支付商户平台支付授权目录</p>
        </el-form-item>
        <el-form-item label="MCH_ID（商户ID）" prop="wechat_mch_id">
          <el-input  v-model="form.wechat_mch_id" placeholder="请输入10位数字商户MCH_ID" class="filter-item tw-filter-input" style="width:500px"/>
          <p style="color:#888;margin:0">注意：商户ID必需与微信接口配置公众号APPID对应，否则无法使用支付功能！</p>
        </el-form-item>
        <el-form-item label="PartnerKey（商户密钥）" prop="wechat_partnerkey">
          <el-input  v-model="form.wechat_partnerkey" placeholder="请输入32位商户支付密钥" style="display:flex; width:500px" class="filter-item tw-filter-input"/>
          <p style="color:#888;margin:0">微信支付商户密钥需要在商户平台配置，必需填写密钥之后才能正常使用微信支付功能。</p>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer">
      <el-button style="margin-left:40%;" v-waves class="filter-item tw-filter-button" @click="updateData()">保存数据</el-button>
    </div>
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive

export default {
  directives: { waves },
  data() {
    return {
      apiPath: 'project.service',
      // 表单数据
      form: {
        wechat_mch_id:'',        //商户ID
        wechat_partnerkey:'',    //商户密钥
        wechat_pay_url:'',       //支付授权目录
      }
    }
  },
  created() {
    // 获取详情
    this.$api.getDetail({}, this.apiPath).then(response => {
      //数据处理
      for(let key in this.form){
        if(response.detail.hasOwnProperty(key)){
          this.form[key] = response.detail[key]
        }
      }
    })
  },
  methods: {
    // 保存数据
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$api.edit(this.form, this.apiPath).then(response => {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
          })
        }
      })
    }
    
  }
}
</script>
